<template>
  <div class="u-p">
    <el-form :model="formItem" :rules="rules" ref="formRef" :label-width="80">
      <el-form-item label="头像">
        <!--        <Avatar v-if="formItem.face" :src="formItem.face" size="80"/>-->
        <el-avatar v-if="formItem.avatar" :src="formItem.avatar" size="large"/>
        <!--        <Avatar v-else icon="ios-person" size="80"/>-->
        <el-avatar v-else :icon="Avatar" :size="80"/>

        <!--        <Upload-->
        <!--          :show-upload-list="false"-->
        <!--          :on-success="handleSuccess"-->
        <!--          :format="['jpg','jpeg','png']"-->
        <!--          :action="action"-->
        <!--          :headers="accessToken"-->
        <!--        >-->
        <!--          <el-button class="mt_10">上传头像</el-button>-->
        <!--        </Upload>-->

      </el-form-item>
      <el-form-item>
        <el-upload ref='upload' :before-upload='beforeAvatarUpload' :headers='accessToken' :on-success='handleSuccess'
                   :action="action" list-type="picture-card" :auto-upload="true" :limit='1' :on-exceed='handleExceed'>
          <el-icon><Plus /></el-icon>

          <template #file="{ file }">
            <div>
              <img class="el-upload-list__item-thumbnail" :src="imgUrl"  style='height: 100%;' alt="" />
              <span class="el-upload-list__item-actions">
          <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
          >
            <el-icon><zoom-in /></el-icon>
          </span>
          <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
          >
            <el-icon><Delete /></el-icon>
          </span>
        </span>
            </div>
          </template>
        </el-upload>

        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </el-form-item>
      <el-form-item label="用户名" prop="username">
        <el-input class="wrapper-user-name" style="width:187px" v-model="formItem.username" placeholder="" />
      </el-form-item>
      <el-form-item label="姓名" prop="realName">
        <el-input class="wrapper-user-name" style="width:187px" v-model="formItem.realName" placeholder="" />
      </el-form-item>
      <el-form-item label="手机" prop="mobile">
        <el-input class="wrapper-user-name" style="width:187px" v-model="formItem.mobile" placeholder="" />
      </el-form-item>
      <el-form-item label="生日">
        <el-date-picker
            v-model="formItem.birthday"
            type="date"
            placeholder="请选择出生日期"
        />
        <!--        <DatePicker type="date" placeholder="选择您的生日" v-model="formItem.birthday"></DatePicker>-->
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="formItem.gender" type="button" button-style="solid">
          <el-radio value="F" label="男"></el-radio>
          <el-radio value="M" label="女"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save" size="default">修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang='ts'>
import storage from '@/utils/storage.ts';
import { commonUrl } from '@/utils/request.ts';
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, type UploadInstance, type UploadProps, type UploadRawFile } from 'element-plus'
import { Avatar,Plus,ZoomIn,Delete } from '@element-plus/icons-vue'
import {editMemberInfo} from "@/api/account.ts";
import {getMemberInfo, me} from "@/api/login.ts";

const formRef = ref()
const rules = reactive({ // 验证规则
  nickName: [{required: true, message: '请填写昵称'},
    { max: 16, message: '昵称最多允许输入16位'}]
})
const imgUrl = ref('')
const formItem = reactive({
  id: undefined,
  username: undefined,
  avatar: undefined,
  birthday: undefined,
  realName: undefined,
  age: undefined,
  gender: undefined,
  mobile: undefined,
}) // 表单数据
const baseImgUrl = import.meta.env.VITE_PIC_URL;
const action = ref(baseImgUrl + '/api/v1/common/upload') // 上传接口
const token = reactive({
  'Authorization': ''
}) // 验证token
const fileList = reactive([])
function save () { // 保存
  formRef.value.validate(valid => {
    if (valid) {
      let params = {
        id: user.value.id,
        birthday: formItem.birthday,
        avatar: imgUrl.value,
        realName: formItem.realName,
        gender: formItem.gender,
        mobile: formItem.mobile,
      }
      editMemberInfo(params).then(res => {
        if(res.code === '00000' && res.data === true){
          ElMessage.success('修改成功')
        }
      })
    }
  })
}
const dialogImageUrl = ref()
const dialogVisible = ref()
const user = ref({})
const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}
const handleSuccess = (res,file)=>{
  if(res.code === '00000'){
    imgUrl.value = res.data
    formItem.avatar = res.data
  }
}
const upload = ref<UploadInstance>()
const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = new Date().valueOf();
  upload.value!.handleStart(file)
}
// function handleSuccess (res, file) { // 上传成功
//   this.$set(this.formItem, 'face', res.result)
// }

onMounted(()=>{
  formRef.value.resetFields()
  getMemberInfo().then((res)=>{
    Object.assign(formItem,res.data)
  })
  token.Authorization = storage.getItem('accessToken');
  user.value = JSON.parse(storage.getItem('userInfo'));
})
</script>

<style scoped>
  .u-p {
    width: 100%;
    padding-top: 30px;
    padding-left: 20px;
  }
</style>
